/******************************************************************************
* File description: OpenFileOthersFileUpLoadTable.qml
* Function: 上传文件表格
* Current Version: 1.0.0
* Author: 张宇轩
* Date: 2024-08-20
*  -----
*  Copyright by 博坤生物 .
 *****************************************************************************/
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import Qt.labs.qmlmodels 1.0

Item {
    id: root

    /* property 定义开始 */
    // 表格数据
    property var tableModels: []
    // 显示记录的表格数据
    property var savedTableData: []

    // 私有
    // 渲染的表格数据
    property var _tableModel: root.tableModels
    // 表头数组
    property var _horHeaderData: ["试剂盒类型", "试剂盒名称", "体系(μl)"]
    // 表头高度
    property int _horHeaderHeight: 48
    // 表格行高
    property int _tableItemHeight: 48
    // 列宽数组比率
    property var _columnWidthRatio: [0.07, 0.23, 0.43, 0.27]
    // 体系
    property var _tixiModel: ["10ul", "15ul", "25ul"]
    // 试剂盒信息
    property var _normalStr: ["Verifiler Plus", "PP21", "PP27", "GlobalFiler", "ID",
        "ID plus", "BTY25A", "海尔施S6"]
    property var _yStr: ["Y41白金", "海尔施Y40", "BTY44Y案件", "BTY44Y建库"]
    property var _miniStr: ["新海NHID Mini 25A", "BTY13A"]
    // 表头复选框是否为被动全选
    property bool _headerIsChecked: false
    // 表格复选框是否为被动全选
    property bool _tableIsChecked: false

    // 信号
    // 内部
    // 表头复选框
    signal headerCheckBoxChecked(bool checked);

    // 发给c++

    // 函数
    // 渲染table
    function renderHunheTable(){
        // 表格数据
        const tableData = [
                            {"复选": "0", "试剂盒类型": "常STR", "试剂盒名称": root._normalStr, "体系": root._tixiModel},
                            {"复选": "0", "试剂盒类型": "Y-STR", "试剂盒名称": root._yStr, "体系": root._tixiModel},
                            {"复选": "0", "试剂盒类型": "mini-STR", "试剂盒名称": root._miniStr, "体系": root._tixiModel}
                        ]
        const savedTableData = [
                                 {"复选": "0", "试剂盒类型": "常STR", "试剂盒名称": root._normalStr[0], "体系": root._tixiModel},
                                 {"复选": "0", "试剂盒类型": "Y-STR", "试剂盒名称": root._yStr[0], "体系": root._tixiModel},
                                 {"复选": "0", "试剂盒类型": "mini-STR", "试剂盒名称": root._miniStr[0], "体系": root._tixiModel}
                             ]
        // 设置数据
        root.tableModels = tableData
        // 设置记录的表格数据
        root.savedTableData = savedTableData
    }

    // 函数
    // 复选框变化
    function tableCheckBtnStateChanged(checked, shijiheType){
        var savedTableDataLen = root.savedTableData.length
        for(let i = 0; i < savedTableDataLen; i++){
            if(root.savedTableData[i]["试剂盒类型"] === shijiheType){
                // 记录复选状态
                root.savedTableData[i]["复选"] = checked ? "1" : "0"
                break;
            }
        }
    }

    // 下拉框变化
    // 试剂盒名称变化
    function shijiheNameChanged (shijiheName, shijiheType) {
        var savedTableDataLen = root.savedTableData.length
        for(let i = 0; i < savedTableDataLen; i++){
            if(root.savedTableData[i]["试剂盒类型"] === shijiheType){
                // 记录试剂盒名称
                root.savedTableData[i]["试剂盒名称"] = shijiheName
                break;
            }
        }
    }

    // 体系变化
    function tixiChanged (tixi, shijiheType) {
        var savedTableDataLen = root.savedTableData.length
        for(let i = 0; i < savedTableDataLen; i++){
            if(root.savedTableData[i]["试剂盒类型"] === shijiheType){
                // 记录体系
                root.savedTableData[i]["体系"] = tixi
                break
            }
        }
    }

    // 返回数据
    function returnTableSavedData () {
        return root.savedTableData
    }

    /* property 定义结束 */

    Item {
        id: tableViewContainer
        anchors.fill: parent

        ButtonGroup {
            id: checkButtonGroup
            exclusive: false
            checkState: headerCheckBox.checkState
        }

        // 横向表头
        Item {
            id: horizontalHeader
            height: _horHeaderHeight
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.right: parent.right

            Row {
                spacing: 0

                // 复选框
                Item {
                    id: headerCheckBoxCon

                    width: horizontalHeader.width * _columnWidthRatio[0]
                    height: horizontalHeader.height

                    // 复选框
                    CustomCheckBox {
                        id: headerCheckBox

                        width: checkWidth
                        height: checkHeight
                        anchors.centerIn: parent
                        checkBoxText: "     " // 这里传空串会导致复选框失效
                        checkBoxFontPixelSize: 0
                        spacing: 0
                        z: 999
                        checkState: checkButtonGroup.checkState
                        checkBorderColor: "checkBorderColor"
                    }

                    // 背景
                    Rectangle {
                        anchors.fill: parent
                        border.width: 0
                        color: "#FFF5F5F5"
                    }

                    // 画边框
                    Canvas {
                        id: horHeaderCkeckBoxCanvas
                        antialiasing: true
                        anchors.fill: parent
                        onPaint: {
                            var ctx = getContext("2d")
                            ctx.clearRect(0, 0, width, height)
                            ctx.strokeStyle = "#FFDEDEDE"
                            ctx.lineWidth = 2
                            ctx.beginPath()

                            // 左边框
                            ctx.moveTo(0, 0)
                            ctx.lineTo(0, height)
                            ctx.stroke()

                            // 上边框
                            ctx.moveTo(0, 0)
                            ctx.lineTo(width, 0)
                            ctx.stroke()

                            // 下边框
                            ctx.moveTo(0, height)
                            ctx.lineTo(width, height)
                            ctx.stroke()
                        }
                    }
                }

                Repeater {
                    model: _horHeaderData

                    Item {
                        width: horizontalHeader.width * _columnWidthRatio[index+1]
                        height: horizontalHeader.height

                        Rectangle {
                            anchors.fill: parent
                            border.width: 0
                            color: "#FFF5F5F5"

                            Text {
                                text: qsTr(modelData)
                                anchors.centerIn: parent
                                font.pixelSize: 16
                                font.family: "Alibaba PuHuiTi"
                                color: "#222"
                            }
                        }

                        // 画边框
                        Canvas {
                            id: horHeaderCanvas
                            antialiasing: true
                            anchors.fill: parent
                            onPaint: {
                                var ctx = getContext("2d")
                                ctx.clearRect(0, 0, width, height)
                                ctx.strokeStyle = "#FFDEDEDE"
                                ctx.lineWidth = 2
                                ctx.beginPath()

                                // 左边框
                                ctx.moveTo(0, 0)
                                ctx.lineTo(0, height)
                                ctx.stroke()

                                // 上边框
                                ctx.moveTo(0, 0)
                                ctx.lineTo(width, 0)
                                ctx.stroke()

                                // 下边框
                                ctx.moveTo(0, height)
                                ctx.lineTo(width, height)
                                ctx.stroke()
                            }
                        }

                        // 右边框
                        Canvas {
                            id: horHeaderCanvasRightBorder
                            visible: index === (_horHeaderData.length - 1)
                            antialiasing: true
                            anchors.fill: parent
                            onPaint: {
                                var ctx = getContext("2d")
                                ctx.clearRect(0, 0, width, height)
                                ctx.strokeStyle = "#FFDEDEDE"
                                ctx.lineWidth = 2
                                ctx.beginPath()
                                ctx.moveTo(width, 0)
                                ctx.lineTo(width, height)
                                ctx.closePath()
                                ctx.stroke()
                            }
                        }

                        onWidthChanged: {
                            horHeaderCanvasRightBorder.requestPaint()
                        }
                    }
                }
            }
        }

        // tableview
        TableView {
            id: tableContent
            anchors {
                fill: parent
                topMargin: _horHeaderHeight
            }
            clip: true
            boundsBehavior: Flickable.StopAtBounds
            columnSpacing: 0
            rowSpacing: 0

            columnWidthProvider: function(column){
                return horizontalHeader.width * _columnWidthRatio[column]
            }

            rowHeightProvider: function(row){
                return _tableItemHeight
            }

            model: TableModel {
                id: tableModel

                TableModelColumn {display: "复选"}
                TableModelColumn {display: "试剂盒类型"}
                TableModelColumn {display: "试剂盒名称"}
                TableModelColumn {display: "体系"}
                rows: _tableModel
            }

            delegate: DelegateChooser {
                id: itemDele

                // 复选框
                DelegateChoice {
                    id: checkedItem

                    column: 0
                    delegate: Item {
                        id: checkedItemDelegate
                        width: tableContent.columnWidthProvider(column)
                        height: tableContent.rowHeightProvider(0)

                        CustomCheckBox {
                            id: checkBoxItem
                            width: checkWidth
                            height: checkHeight
                            anchors.centerIn: parent
                            checkBoxText: "     " // 这里传空串会导致复选框失效
                            checkBoxFontPixelSize: 0
                            spacing: 0
                            ButtonGroup.group: checkButtonGroup
                            checkBorderColor: "checkBorderColor"


                            // 记录状态变化
                            onCheckedSig: function(checked){
                                root.tableCheckBtnStateChanged(checked,
                                                               root._tableModel[row]["试剂盒类型"])
                            }
                        }

                        // 边框
                        Canvas {
                            id: checkedBoxCanvas
                            anchors.fill: parent
                            antialiasing: true
                            onPaint: {
                                var ctx = getContext("2d")
                                ctx.strokeStyle = "#FFCCCCCC"
                                ctx.lineWidth = 2
                                // 左边框
                                ctx.moveTo(0, 0)
                                ctx.lineTo(0, height)
                                ctx.stroke()
                                // 下边框
                                ctx.moveTo(0, height)
                                ctx.lineTo(width, height)
                                ctx.stroke()
                            }
                        }
                    }
                }

                // 试剂盒类型
                DelegateChoice {
                    id: shijieheTypeItem
                    column: 1
                    delegate: Label {
                        id: shijieheTypeLabel
                        width: tableContent.columnWidthProvider(column)
                        height: tableContent.rowHeightProvider(0)
                        font.pixelSize: 16
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        text: display

                        // 边框
                        Canvas {
                            id: shijiheTypeCanvas
                            anchors.fill: parent
                            antialiasing: true
                            onPaint: {
                                var ctx = getContext("2d")
                                ctx.strokeStyle = "#FFCCCCCC"
                                ctx.lineWidth = 2
                                // 左边框
                                ctx.moveTo(0, 0)
                                ctx.lineTo(0, height)
                                ctx.stroke()
                                // 下边框
                                ctx.moveTo(0, height)
                                ctx.lineTo(width, height)
                                ctx.stroke()
                            }
                        }
                    }
                }

                // 试剂盒名称
                DelegateChoice {
                    id: shijieheNameItem
                    column: 2
                    delegate: Item {
                        id: shijieheNameDelegate
                        width: tableContent.columnWidthProvider(column)
                        height: tableContent.rowHeightProvider(0)

                        CustomComboBox {
                            id: shijiheNameComboBox
                            anchors {
                                fill: parent
                                leftMargin: 23
                                rightMargin: 23
                            }
                            comboBorderWidth: 0
                            comboFontHorAlign: Text.AlignHCenter
                            model: display

                            // 记录试剂盒名称变化
                            onCurrentText: function(text){
                                root.shijiheNameChanged(text, root._tableModel[row]["试剂盒类型"])
                            }
                        }

                        // 边框
                        Canvas {
                            id: shijiheNameCanvas
                            anchors.fill: parent
                            antialiasing: true
                            onPaint: {
                                var ctx = getContext("2d")
                                ctx.strokeStyle = "#FFCCCCCC"
                                ctx.lineWidth = 2
                                // 左边框
                                ctx.moveTo(0, 0)
                                ctx.lineTo(0, height)
                                ctx.stroke()
                                // 下边框
                                ctx.moveTo(0, height)
                                ctx.lineTo(width, height)
                                ctx.stroke()
                            }
                        }
                    }
                }

                // 体系
                DelegateChoice {
                    id: tixiItem
                    column: 3
                    delegate: Item {
                        id: tixiDelegate
                        width: tableContent.columnWidthProvider(column)
                        height: tableContent.rowHeightProvider(0)

                        CustomComboBox {
                            id: tixiComboBox
                            anchors {
                                fill: parent
                                leftMargin: 23
                                rightMargin: 23
                            }
                            comboBorderWidth: 0
                            comboFontHorAlign: Text.AlignHCenter
                            model: display

                            // 记录体系变化
                            onCurrentText: function(text){
                                root.tixiChanged(text, root._tableModel[row]["试剂盒类型"])
                            }
                        }

                        // 边框
                        Canvas {
                            id: tixiCanvas
                            anchors.fill: parent
                            antialiasing: true
                            onPaint: {
                                var ctx = getContext("2d")
                                ctx.strokeStyle = "#FFCCCCCC"
                                ctx.lineWidth = 2
                                // 左边框
                                ctx.moveTo(0, 0)
                                ctx.lineTo(0, height)
                                ctx.stroke()
                                // 下边框
                                ctx.moveTo(0, height)
                                ctx.lineTo(width, height)
                                ctx.stroke()
                                // 右边框
                                ctx.beginPath()
                                ctx.moveTo(width, 0)
                                ctx.lineTo(width, height)
                                ctx.closePath()
                                ctx.stroke()
                            }
                        }

                        // 宽度变化
                        onWidthChanged: {
                            tixiCanvas.requestPaint();
                        }
                    }
                }

            }

            // 事件
            onWidthChanged: {
                forceLayout() // 强制重新布局刷新视图
            }

            onHeightChanged: {
                forceLayout() // 强制重新布局刷新视图
            }

            // 组件加载完毕
            Component.onCompleted: {
                // 渲染数据
                root.renderHunheTable();
            }
        }
    }
}
